<template>
  <view class="normal-login-container">

    <view class="item-wrap" style="margin-bottom: 0">
      <view class="lineBottom10">
        <uni-section title="交强险信息" type="line"/>
      </view>

      <view style="margin: 8rpx 20rpx 8rpx 20rpx">
        <uni-forms ref="ruleForm" :rules="rules" :label-position="boole ? 'top' : 'left'" :model="ruleForm"
                   labelWidth="auto">

          <uni-forms-item label="租赁禀议保险公司:">
            <uni-easyinput v-if="boole" v-model="ruleForm.rentInsuranceCompany" disabled
                           placeholder="请输入租赁禀议保险公司"/>
            <text v-else> {{ ruleForm.rentInsuranceCompany || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="投保渠道:">
            <zxz-uni-data-select v-if="boole" v-model="ruleForm.insuranceChannels.toString()"
                                 :localdata="insuranceList" dataKey="label" dataValue="value"
                                 disabled/>
            <text v-else> {{ handleLabel(insuranceList, ruleForm.insuranceChannels) }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="被保险人:" name="syxInsuredName" :required="boole"
                          :rules="[{required:true, errorMessage: '请输入被保险人',validateTrigger:'blur'}]">
            <text class="syxInsuredName"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.syxInsuredName" placeholder="请输入被保险人"/>
            <text v-else> {{ ruleForm.syxInsuredName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="交强险公司:" name="jqxCompanyId" :required="boole"
                          :rules="[{required:true, errorMessage: '请选择交强险公司',validateTrigger:'bind'}]">
            <text class="jqxCompanyId"/>
            <zxz-uni-data-select v-if="boole" v-model="ruleForm.jqxCompanyId" :localdata="options"
                                 dataKey="supplierName" dataValue="supplierId"
                                 placeholder="请选择交强险公司"
                                 @change="handleJqx"
                                 :clear="true" filterable/>
            <text v-else>{{ ruleForm.jqxCompany || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="交强险公司编码:" name="jqxCompanyCode" :required="boole"
                          :rules="[{required:true, errorMessage: '请输入交强险公司编码',validateTrigger:'blur'}]">
            <text class="jqxCompanyCode"/>
            <uni-easyinput v-if="boole" disabled v-model="ruleForm.jqxCompanyCode" placeholder="请输入交强险公司编码"/>
            <text v-else> {{ ruleForm.jqxCompanyCode || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="交强险起保日:" name="jqxExpectBeginTime" :required="boole"
                          :rules="[{required:true, errorMessage: '请选择交强险起保日',validateTrigger:'bind'}]">
            <text class="jqxExpectBeginTime"/>
            <uni-datetime-picker v-if="boole" type="date" placeholder="请选择交强险起保日"
                                 @change="handleTime"
                                 return-type="string" v-model="ruleForm.jqxExpectBeginTime"/>
            <text v-else> {{ ruleForm.jqxExpectBeginTime || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="交强险到期日:" name="jqxExpectEndTime" :required="boole"
                          :rules="[{required:true, errorMessage: '请选择交强险到期日',validateTrigger:'bind'}]">
            <text class="jqxExpectEndTime"/>
            <uni-datetime-picker v-if="boole" type="date" placeholder="请选择交强险到期日"
                                 :start="handleEffectDate(ruleForm.jqxExpectBeginTime)"
                                 return-type="string" v-model="ruleForm.jqxExpectEndTime"/>
            <text v-else> {{ ruleForm.jqxExpectEndTime || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="交强险性质:" name="jqxInsuranceType" :required="boole"
                          :rules="[{required:true, errorMessage: '请选择交强险性质',validateTrigger:'bind'}]">
            <text class="jqxInsuranceType"/>
            <uni-data-select v-if="boole" v-model="ruleForm.jqxInsuranceType" :localdata="range"
                             @change="handleInsuranceType"
                             placeholder="请选择交强险性质" :clear="true" filterable/>
            <text v-else> {{
                ruleForm.jqxInsuranceType == '1' ? '运营' : ruleForm.jqxInsuranceType == '2' ? '非运营' : ''
              }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="交强险保费:" name="jqxAmount" :required="boole"
                          :rules="[{required:true, errorMessage: '请输入交强险保费',validateTrigger:'blur'}]">
            <text class="jqxAmount"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.jqxAmount"
                           @clear="clear('jqxAmount')"
                           @blur="blurAmount('jqxAmount')"
                           placeholder="请输入交强险保费"/>
            <text v-else> {{ ruleForm.jqxAmount || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车船税是否缴纳:" name="carTaxStatus" :required="boole"
                          :rules="[{required:true, errorMessage: '车船税是否缴纳',validateTrigger:'bind'}]">
            <text class="carTaxStatus"/>
            <uni-data-checkbox v-if="boole" v-model="ruleForm.carTaxStatus" :localdata="carTaxList"/>
            <text v-else> {{
                Number(ruleForm.carTaxStatus) === 1 ? '是' : Number(ruleForm.carTaxStatus) === 2 ? '否' : ""
              }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="车船税:" name="carTax" :required="boole"
                          v-if="Number(ruleForm.carTaxStatus) === 1"
                          :rules="[{required:true, errorMessage: '请输入车船税',validateTrigger:'blur'}]">
            <text class="carTax"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.carTax"
                           @clear="clear('carTax')"
                           @blur="blurAmount('carTax')"
                           placeholder="请输入车船税"/>
            <text v-else> {{ ruleForm.carTax || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="交强险保单号:" name="jqxPolicyCode" :required="boole"
                          :rules="[{required:true,errorMessage:'请输入交强险保单号',validateTrigger: 'blur'}]"
                          v-if="ruleForm.insuranceVoList.length === 1 && Number(ruleForm.insuranceChannels) === 3">
            <text class="jqxPolicyCode" />
            <uni-easyinput v-if="boole" v-model="ruleForm.jqxPolicyCode"
                           @change="handleCode"
                           placeholder="请输入交强险保单号"/>
            <text v-else> {{ ruleForm.jqxPolicyCode || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="交强险保单:" name="jqxPolicyUrl" :required="boole"
                          :rules="[{required:true,errorMessage:'上传交强险保单',validateTrigger: 'blur'}]"
                          v-if="ruleForm.insuranceVoList.length === 1 && Number(ruleForm.insuranceChannels) === 3">
            <image-common :disabled="!boole" :up-type="2" v-model="ruleForm.jqxPolicyUrl"/>
          </uni-forms-item>

        </uni-forms>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'jqxInfo',//交强险信息
  props: {
    value: {
      type: Object,
      default: {},
    },
    boole: {
      type: Boolean,
      default: true,
    },
    options: {
      type: Array,
      default: [],
    },
    insuranceList:{
      type: Array,
      default: [],
    }
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.handleData(key, value)
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    handleLabel() {
      return function (arr, type) {
        let name = "";
        arr.map((v) => {
          if (type == v.value) {
            name = v.label;
          }
        });
        return name;
      };
    },
  },
  watch: {
    'value.jqxPolicyUrl': {
      handler(val) {
        if (val) {
          this.$refs.ruleForm.clearValidate(['jqxPolicyUrl'])
        }
      },
      deep: true,
    },
    'value.jqxExpectBeginTime': {
      handler(val) {
        if (val) {
          this.$refs.ruleForm.clearValidate(['jqxExpectBeginTime'])
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      range: [
        {value: "1", text: "运营"},
        {value: "2", text: "非运营"},
      ],
      carTaxList: [
        {value: 1, text: "是"},
        {value: 2, text: "否"},
      ]
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleCode(val){
      if(val){
        if(val ===  this.ruleForm.syxPolicyCode){
          this.$modal.msgError("交强险保单号冲突,请核实");
          this.value.jqxPolicyCode = this.ruleForm.jqxPolicyCode = ''
        }else {
          this.value.jqxPolicyCode = this.ruleForm.jqxPolicyCode = val
        }
      }else{
        this.value.jqxPolicyCode = this.ruleForm.jqxPolicyCode = ''
      }
    },

    handleEffectDate(val){
      let date = new Date(val)
      return date.setDate(date.getDate() + 1);
    },

    handleData(key, value) {
      this.value.insuranceVoList.forEach(item => {
        if (typeof (item) !== "string") {
          item[key] = value
        } else {
          item[key] = value
        }

      })
    },

    //公司
    handleJqx(val) {
      if (val) {
        this.value.jqxCompanyId = this.ruleForm.jqxCompanyId = val.supplierId
        this.value.syxCompanyId = this.ruleForm.syxCompanyId = val.supplierId
        this.value.jqxCompany = this.ruleForm.jqxCompany = val.supplierName
        this.value.syxCompany = this.ruleForm.syxCompany = val.supplierName
        this.value.jqxCompanyCode = this.ruleForm.jqxCompanyCode = val.supplierCode
        this.value.syxCompanyCode = this.ruleForm.syxCompanyCode = val.supplierCode
        this.value.insuranceVoList.forEach(item => {
          this.$set(item, 'syxCompanyCode', val.supplierCode)
          this.$set(item, 'syxCompany', val.supplierName)
          this.$set(item, 'syxCompanyId', val.supplierId)
          this.$set(item, "jqxCompanyCode", val.supplierCode);
          this.$set(item, "jqxCompany", val.supplierName);
          this.$set(item, "jqxCompanyId", val.supplierId);
        })
      }
    },

    //性质
    handleInsuranceType(val) {
      if (val) {
        this.value.jqxInsuranceType = this.ruleForm.jqxInsuranceType = val
        this.value.syxInsuranceType = this.ruleForm.syxInsuranceType = val
      }
    },

    //起保日
    handleTime(time) {
      let timeDate = this.addOneMonth(time, 12)
      this.$set(this.value, 'jqxExpectBeginTime', time)
      this.$set(this.ruleForm, 'jqxExpectBeginTime', time)
      this.$set(this.ruleForm, 'jqxExpectEndTime', timeDate)
      this.$set(this.value, 'jqxExpectEndTime', timeDate)
      this.$set(this.value, 'syxExpectBeginTime', time)
      this.$set(this.value, 'syxExpectEndTime', timeDate)
      this.$set(this.ruleForm, 'syxExpectBeginTime', time)
      this.$set(this.ruleForm, 'syxExpectEndTime', timeDate)
    },

    addOneMonth(dateString, month) {
      const date = new Date(dateString);
      date.setMonth(date.getMonth() + Number(month));
      date.setDate(date.getDate() - 1);
      return date.toISOString().split("T")[0]; // 返回YYYY-MM-DD格式的日期字符串
    },


    blurAmount(str) {
      if (this.ruleForm[str]) {
        let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
        if (!msg.test(this.ruleForm[str])) {
          this.ruleForm[str] = "";
        } else {
          this.ruleForm[str] = this.ruleForm[str]
              .toString()
              .match(/^\d+(?:\.\d{0,2})?/)[0];
        }
      }
    },

    clear(str){
      this.value[str] = this.ruleForm[str] = ''
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate().then((res) => {
          resolve();
        }).catch((err) => {
          let key = ".flex-col" + ">>>" + "." + err[0].key;
          reject(key);
        });
      });
    },
  },
};
</script>

<style scoped lang=""></style>


